<template>
  <!-- 加注量 -->
  <view class="package_sale">
    <view>加注量</view>
    <view class="space-between">
      <view class="charts-box">
        <qiun-data-charts type="pie" :opts="opts" :chartData="chartData1" />
      </view>
      <view class="direction-start" style="width:25%">
        <view v-for="(item,index) in list1" :key="index" class="center">
          <view :style="{background:item.color,width:(36-3*index)+'rpx',height:'20rpx'}"></view>
          <view class="names">{{item.name}}</view>
        </view>
      </view>
    </view>
  </view>
  <!-- 收益 -->
  <view class="package_sale">
    <view>收益</view>
    <view class="space-between">
      <view class="charts-box">
        <qiun-data-charts type="pie" :opts="opts" :chartData="chartData2" />
      </view>
      <view class="direction-start" style="width:25%">
        <view v-for="(item,index) in list2" :key="index" class="center">
          <view :style="{background:item.color,width:(36-3*index)+'rpx',height:'20rpx'}"></view>
          <view class="names">{{item.name}}</view>
        </view>
      </view>
    </view>
  </view>
  <!-- 新增车友 -->
  <view class="package_sale">
    <view>新增车友</view>
    <view class="space-between">
      <view class="charts-box">
        <qiun-data-charts type="pie" :opts="opts" :chartData="chartData3" />
      </view>
      <view class="direction-start" style="width:25%">
        <view v-for="(item,index) in list3" :key="index" class="center">
          <view :style="{background:item.color,width:(36-3*index)+'rpx',height:'20rpx'}"></view>
          <view class="names">{{item.name}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const props = defineProps({
    pieChart: {
      type: Object
    },
  });
  const chartData1 = ref()
  const chartData2 = ref()
  const chartData3 = ref()
  const list1 = ref([])
  const list2 = ref([])
  const list3 = ref([])
  const opts = {
    legend: {
      show: false
    }
  }
  getServerData()
  function getServerData() {
    // color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      // 加注量
      let res1 = { series: [{ data: JSON.parse(props.pieChart.amount_data) }] };
      chartData1.value = JSON.parse(JSON.stringify(res1));
      list1.value = chartData1.value.series[0].data
      // 收益
      let res2 = { series: [{ data: JSON.parse(props.pieChart.shouyi_data) }] };
      chartData2.value = JSON.parse(JSON.stringify(res2));
      list2.value = chartData2.value.series[0].data
      // 新增车友
      let res3 = { series: [{ data: JSON.parse(props.pieChart.add_user_data) }] };
      chartData3.value = JSON.parse(JSON.stringify(res3));
      list3.value = chartData3.value.series[0].data
      console.log(list3.value)
    }, 500);
  }
  defineExpose({ getServerData });
</script>

<style scoped lang="less">
  .charts-box {
    width: 70%;
    height: 360rpx;
  }

  .names {
    margin-left: 20rpx;
    width: 140rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>